<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测评查询系统</title>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.7.0/css/zui.min.css">

<!-- ZUI Javascript 依赖 jQuery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.7.0/lib/jquery/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.7.0/js/zui.min.js"></script>
  </head>
  <body>
  <div class="container">
    <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
     <a class="navbar-brand" href="#">测评查询系统</a>
     <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" id="txt" style="min-width: 700px;"  class="form-control" placeholder="搜索">
        </div>
        <button type="button" id="search" class="btn btn-default">搜索</button>
      </form>
    </div>
  </div>
</nav>

<div id="list">
</div>

</div>

  <script type="text/javascript">
  $(function(){
	  $("#search").click(function(){
		  if($("#txt").val()==0){
			  alert("请输入姓名")
			  return;
		  }else{
			  $.ajax({
		             type: "GET",
		             url: "http://act.imyunxiang.com/gw/json/dfjl/query",
		             data: {name:$("#txt").val()},
		             dataType: "json",
		             success: function(data){
		                         $('#list').empty();   //清空resText里面的所有内容
		                         var html = "<table class=\"table\">\n" +
		                         "  <tbody>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;姓名&gt;</code></td>\n" +
		                         "      <td>"+data["姓名"]+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;性别&gt;</code></td>\n" +
		                         "      <td>"+data["性别"]+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;年龄&gt;</code></td>\n" +
		                         "      <td>"+data["年龄"]+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;婚否&gt;</code></td>\n" +
		                         "      <td>"+data["婚否"]+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;最高学历&gt;</code></td>\n" +
		                         "      <td>"+data["最高学历"]+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;幼师工作年限&gt;</code></td>\n" +
		                         "      <td>"+data["幼师工作年限"]+"年</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;工作满意度&gt;</code></td>\n" +
		                         "      <td>得分:"+data["工作满意度"]+"<br/><code>解释:</code>"+data["gzmyd"].text+"<br/><code>建议:</code>"+data["gzmyd"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;生活满意度&gt;</code></td>\n" +
		                         "      <td>得分:"+data["生活满意度"]+"<br/><code>解释:</code>"+data["shmyd"].text+"<br/><code>建议:</code>"+data["shmyd"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;焦虑&gt;</code></td>\n" +
		                         "      <td>得分:"+data["焦虑"]+"<br/><code>解释:</code>"+data["jl"].text+"<br/><code>建议:</code>"+data["jl"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;抑郁&gt;</code></td>\n" +
		                         "      <td>得分:"+data["抑郁"]+"<br/><code>解释:</code>"+data["yy"].text+"<br/><code>建议:</code>"+data["yy"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;压力&gt;</code></td>\n" +
		                         "      <td>得分:"+data["压力"]+"<br/><code>解释:</code>"+data["yl"].text+"<br/><code>建议:</code>"+data["yl"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;宜人性&gt;</code></td>\n" +
		                         "      <td>得分:"+data["宜人性"]+"<br/><code>解释:</code>"+data["yrx"].text+"<br/><code>建议:</code>"+data["yrx"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;责任感&gt;</code></td>\n" +
		                         "      <td>得分:"+data["责任感"]+"<br/><code>解释:</code>"+data["zrg"].text+"<br/><code>建议:</code>"+data["zrg"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;外向性&gt;</code></td>\n" +
		                         "      <td>得分:"+data["外向性"]+"<br/><code>解释:</code>"+data["wxx"].text+"<br/><code>建议:</code>"+data["wxx"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;开放性&gt;</code></td>\n" +
		                         "      <td>得分:"+data["开放性"]+"<br/><code>解释:</code>"+data["kfx"].text+"<br/><code>建议:</code>"+data["kfx"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;神经质&gt;</code></td>\n" +
		                         "      <td>得分:"+data["神经质"]+"<br/><code>解释:</code>"+data["sjz"].text+"<br/><code>建议:</code>"+data["sjz"].remark+"</td>\n" +
		                         "    </tr>\n" +
		                         "    <tr>\n" +
		                         "      <td style=\"width: 200px\"><code>&lt;情绪管理&gt;</code></td>\n" +
		                         "      <td>得分:"+data["情绪管理"]+"<br/>" +
		                         "    </tr>\n" +
		                         "  </tbody>\n" +
		                         "</table>"; 
		                         /**$.each(data, function(commentIndex, comment){
		                               html += '<div class="comment"><h6>' + comment['username']
		                                         + ':</h6><p class="para"' + comment['content']
		                                         + '</p></div>';
		                         });*/
		                         $('#list').html(html);
		                      }
		         });
			 
		  }
		  
		  //
	  })
  })
  </script>
  </body>
</html>
